<template>
  <div class="count_card">
    <div class="header">
      <span>{{ title }}</span>
      <el-tooltip :content="tips" placement="top" effect="light">
        <el-icon><Warning /></el-icon>
      </el-tooltip>
    </div>
    <div class="content">
      <span ref="count1Ref">{{ number1 }}</span>
    </div>
    <div class="footer">
      <span>{{ subtitle }}&nbsp</span>
      <span ref="count2Ref">{{ number2 }}</span>
      {{}}
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted } from 'vue'
import { CountUp } from 'countup.js'

interface IProps {
  amount?: string
  title?: string
  tips?: string
  number1: number
  number2: number
  subtitle?: string
}
const props = withDefaults(defineProps<IProps>(), {
  amount: '',
  title: '商品总销量',
  tips: '所有商品总销量',
  number1: 509989,
  number2: 590089,
  subtitle: '商品总销量'
})

const count1Ref = ref<HTMLElement>()
const count2Ref = ref<HTMLElement>()

const countOption = { duration: 0.8, prefix: props.amount === 'saleroom' ? '¥' : '' }
onMounted(() => {
  const conuntUp1 = new CountUp(count1Ref.value, props.number1, countOption)
  const conuntUp2 = new CountUp(count2Ref.value, props.number2, countOption)

  conuntUp1.start()
  conuntUp2.start()
})
</script>

<style lang="scss" scoped>
.count_card {
  display: flex;
  flex-direction: column;
  padding: 0 1.25em;
  height: 8.125em;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .header {
    display: flex;
    height: 2.3em;
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.45);
    justify-content: space-between;
    align-items: flex-end;
  }
  .content {
    display: flex;
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.85);
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .footer {
    display: flex;
    height: 2.375rem;
    line-height: 0.8em;
    font-size: 0.8em;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.85);
    border-top: 1px solid #f0f0f0;
  }
}
</style>
